<template>
  <div :class="wrpCls">
    <notification :class="prefixCls"></notification>
    <avatar-dropdown :menu="showMenu" :current-user="currentUser" :class="prefixCls" />
    <!-- <select-lang :class="prefixCls" /> -->
    <!-- <div class="help"><a-icon type="question-circle" theme="filled" style="margin-right: 6px" />帮助</div> -->
  </div>
</template>

<script>
import AvatarDropdown from './AvatarDropdown'
import SelectLang from '@/components/SelectLang'
import Notification from './notification'

export default {
  name: 'RightContent',
  components: {
    AvatarDropdown,
    SelectLang,
    Notification
  },
  props: {
    prefixCls: {
      type: String,
      default: 'ant-pro-global-header-index-action'
    },
    isMobile: {
      type: Boolean,
      default: () => false
    },
    layout: {
      type: String,
      required: true
    },
    theme: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      showMenu: true,
      currentUser: {}
    }
  },
  computed: {
    wrpCls () {
      return {
        'ant-pro-global-header-index-right': true,
        [`ant-pro-global-header-index-${(this.isMobile || this.layout === 'sidemenu') ? 'light' : this.theme}`]: true
      }
    }
  },
  mounted () {
    this.currentUser = {
      name: this.$store.getters.nickname,
      avatar: this.$store.getters.avatar,
      email: this.$store.state.user.info.email,
      phone: this.$store.state.user.info.phone,
      job: this.$store.state.user.info.jobTitle,
      department: this.$store.state.user.organization.length && this.$store.state.user.organization[0].orgName
    }
  }
}
</script>

<style lang="less" scoped>
.ant-pro-global-header-index-right.ant-pro-global-header-index-dark {
  .help {
    display: inline-block;
    cursor: pointer;
    padding: 0 10px;
    color: hsla(0deg, 0%, 100%, 0.85);
    &:hover {
      background: #1f71ff;
    }
  }
}

</style>
